﻿/* eslint-disable */
import React, {Component} from 'react';
import DingdanType from '../dingdanType/dingdanType'
import DingdanDetails from '../../components/dingdan/dingdanDetails'
import axios from 'axios'
import {queryOrderByOrderNumber} from '../../utils/api'
import { Card,Row,Col,Input,Select,DatePicker, Space,Button,message,Tabs,Table,Badge,Empty, Modal, } from 'antd';
import {noAgreeExitPayOrder} from '../../utils/api'
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
const { Option } = Select;
const { TabPane } = Tabs;


const gridStyle = {
    width: '25%',
    textAlign:'center',
};

const textAlignCenter={
    textAlign:'center'
}
const orangeStyle={
    color:'orange',
    textAlign:'right'
}

const buttonMargin={margin:'.5rem 1rem',borderRadius:'5px'}
const titleStyle={height:'80px',lineHeight:'50px',fontSize:'20px',color: 'rgb(24,144,255)'}


//订单数据
class DingdanData extends Component {
    render() {
        // console.log(this.props.data)
        return (
            <Card headStyle={titleStyle} title="订单数据">
                    <Card.Grid style={gridStyle}>
                        <p>今日订单总数：<span style={orangeStyle}>250.00元</span></p>
                        <p>本周订单总额：<span style={orangeStyle}>250.00元</span></p>
                        <p>本月订单总额：<span style={orangeStyle}>250.00元</span></p>
                        <p>历史订单：<span style={orangeStyle}>250.00元</span></p>
                    </Card.Grid>
                    <Card.Grid style={gridStyle}>
                        <p>今日新订单数：<span style={orangeStyle}>250个</span></p>
                        <p>本周新订单票张数：<span style={orangeStyle}>250个</span></p>
                        <p>本月订单票张数：<span style={orangeStyle}>250个</span></p>
                        <p>历史订单票总数：<span style={orangeStyle}>250个</span></p>
                    </Card.Grid>
                    <Card.Grid style={gridStyle}>
                        <p>今日有效订单数：<span style={orangeStyle}>250个</span></p>
                        <p>本周有效订单数：<span style={orangeStyle}>250个</span></p>
                        <p>本月有效订单数：<span style={orangeStyle}>250个</span></p>
                        <p>历史订单票总数：<span style={orangeStyle}>250个</span></p>
                    </Card.Grid>
                    <Card.Grid style={gridStyle}>
                        <p>今日退货订单数：<span style={orangeStyle}>250个</span></p>
                        <p>本周退货订单数：<span style={orangeStyle}>250个</span></p>
                        <p>本月退货订单数：<span style={orangeStyle}>250个</span></p>
                        <p>历史退货票总数：<span style={orangeStyle}>250个</span></p>
                    </Card.Grid>
                </Card>
        );
    }
}

//订单筛选
class DingdanSaiXuan extends Component {
    constructor(props) {
        super(props);
        this.state={
            order_number:'',
            order_type_id:'',
            order_state_id:'',
            goodsname:'',
            order_time:'',
            order_time_end:'',
            user_iphone:'',
            order_send_type_id:'',
            morenzhi:''
        }
    }

    onChange(date, dateString) {
        console.log(date, dateString);
    }
    dingdanID=(e)=>{
        this.setState({
            order_number:e.target.value
        })
    }


    dingdanState=(value)=> {
        this.setState({
            order_state_id:value
        })
    }

    goodsName=(e)=>{
        this.setState({
            goodsname:e.target.value
        })
    }

    startTime=(date, dateString)=>{
        this.setState({
            order_time:dateString
        })
    }
    lastTime=(date, dateString)=>{
        this.setState({
            order_time_end:dateString
        })
    }
    sendType=(value)=> {
        this.setState({
            order_send_type_id:value
        })
    }
    goodsPhone=(e)=> {
        this.setState({
            user_iphone:e.target.value
        })
    }

    exportData=()=>{
        message.success('导出数据');
        // return (
        //     <AlertKuang></AlertKuang>
        // )
    }

    render() {
        return (
            <Card headStyle={titleStyle} title="订单筛选">
                    <Row style={textAlignCenter} gutter={[16, 16]}>
                        <Col span={8} >
                            <Row align="middle" gutter={[8,8]}>
                                <Col span={6}>收货人手机</Col>
                                <Col span={14}><Input placeholder="收货人手机" onChange={this.goodsPhone}/></Col>
                            </Row>
                        </Col>
                        <Col span={8} >
                            <Row align="middle" gutter={[8,8]}>
                                <Col span={6}>订单状态</Col>
                                <Col span={14}>
                                    <Select style={{width:'100%'}} defaultValue="" onChange={this.dingdanState}>
                                        <Option value=""></Option>
                                        <Option value="1">待支付</Option>
                                        <Option value="2">待发货</Option>
                                        <Option value="3">已发货</Option>
                                        <Option value="4">已完成</Option>
                                        <Option value="5">退款中</Option>
                                        <Option value="6">已退款</Option>
                                        <Option value="7">待收货</Option>
                                        <Option value="8">已驳回</Option>

                                    </Select>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={8} >
                            <Row align="middle" gutter={[8,8]}>
                                <Col span={6}>寄送类型</Col>
                                <Col span={14}>
                                    <Select style={{width:'100%'}} defaultValue="" onChange={this.sendType}>
                                        <Option value=""></Option>
                                        <Option value="1">寄送到家</Option>
                                        <Option value="2">寄送到站</Option>
                                    </Select>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row style={textAlignCenter} gutter={[16, 16]}>
                        <Col span={8} >
                            <Row align="middle" gutter={[8,8]}>
                                <Col span={6}>支付时间</Col>
                                <Col span={6}>
                                    <Space direction="vertical" size={12}>
                                        <DatePicker locale={locale} placeholder='开始日期' onChange={this.startTime}/>
                                    </Space>
                                </Col>
                                <Col span={2}>--</Col>
                                <Col span={6}>
                                    <Space direction="vertical" size={12}>
                                        <DatePicker locale={locale} placeholder='结束日期' onChange={this.lastTime}/>
                                    </Space>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <Button type="primary" onClick={this.props.search.bind(this,this.state)} style={buttonMargin}>查询</Button>
                            <Button type="primary" onClick={this.props.chongzhi.bind(this,this.state)} style={buttonMargin}>重置</Button>
                        </Col>
                    </Row>
                </Card>
        );
    }
}

//订单列表
class DingdanLieBiao extends Component{
    constructor(props) {
        super(props);
        console.log(props)
        this.state={
            data:props.dingdandata,
            data2:props.dingdandata2,
            columns:'',
            columns2:'',
            isModalVisible:false,
            ModalTitle:'',
            ModalData:'',
            tracking_number:'',
            XQisModalVisible:false,
            XQdata:''
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.dingdandata,
            data2: nextProps.dingdandata2
        });
    }
    addData(val,text) {
        console.log(val)
        console.log(text.target.innerText)
        if (text.target.innerText==='查看同团订单'){
            console.log(123)
            // this.props.history.push('/Index/About/About2')
        }
    }
    xuanranTable=(data,columns)=>{
        if (data!='暂无数据'){
            return <DingdanType.putongDingdan locale={locale} columns={columns} data={data} />
        }else {
            return <Empty
                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                description='暂无数据'
                locale={locale}/>
        }
    }
    kuandiDanhao(val,text){
        console.log(val)
        console.log(text.target.innerText)
        this.setState({
            isModalVisible:true,
            ModalTitle:text.target.innerText,
            ModalData:val
        })
    }
    kuaidiDanQingqiu=(item)=> {
        axios({
            url: noAgreeExitPayOrder,
            method: 'post',
            data: item
        }).then(data => {
            console.log(data)
        })

        this.props.chongzhi.bind(this)
    }
    kuandiDanhaoQueren(val){
        console.log(val)
        if (val.ModalTitle==="修改快递单号"){
            // this.kuaidiDanQingqiu({order_number:this.state.ModalData.order_number,tracking_number:this.state.tracking_number})
        }else {
            // this.kuaidiDanQingqiu({order_number:this.state.ModalData.order_number,tracking_number:this.state.tracking_number})

        }
        this.setState({
            isModalVisible:false
        })
    }
    kuandiDanhaoQuxiao=()=>{
        this.setState({
            isModalVisible:false
        })
    }
    KuaiDiHao=(e)=>{
        console.log(e.target.value)
        this.setState({
            tracking_number:e.target.value
        })
    }
    xiangQing(e){
        console.log(e)
        axios({
            url:queryOrderByOrderNumber,
            method:'get',
            params:{order_number:e.order_number}
        }).then(data=>{
            console.log(data)
            this.setState({
                XQdata:data.data.data[0]
            })
        })
        this.setState({
            XQisModalVisible:true
        })
    }
    xiangqingModal=()=>{
        this.setState({
            XQisModalVisible:false
        })
    }

    render() {
        const {data,data2}=this.state
        // console.log(data)
        // console.log(data2)
        // 普通订单数据
        const columns=[
            {title: '订单编号', dataIndex: "order_number"},
            {title: '商品名称', dataIndex: "goods_name"},
            {title: '商家名称', dataIndex: 'merchanr_name'},
            {title: '收货人名字', dataIndex: "consignee"},
            {title: '收货人电话号码', dataIndex: "consignee_phone"},
            {title: '寄送类型', dataIndex: "order_send_type_name"},
            {title: '支付时间', dataIndex: "order_pay_time"},
            {title: '订单状态', dataIndex: "order_state_name"},
            {
                title: '操作',
                sorter: true,
                render: (text, record) =>{
                    // console.log(text)
                    if (text.order_state_name==='待发货'){
                        return (  //塞入内容
                            <Space size="middle">
                                <Button onClick={this.kuandiDanhao.bind(this,text)} type="primary">录入快递单号</Button>
                            </Space>
                        )
                    }else if (text.order_state_name==='已发货'){
                        return (  //塞入内容
                            <Space size="middle">
                                <Button onClick={this.kuandiDanhao.bind(this,text)} type="primary">修改快递单号</Button >
                                <Button onClick={this.xiangQing.bind(this,text)} type="primary">订单详情</Button>
                            </Space>
                        )
                    }else if (text.order_state_name==='待支付'){
                        return (  //塞入内容
                            <>---</>
                        )
                    }
                }

            },
        ]
        // 拼团订单数据
        const columns2 = [
            {title: '订单编号', dataIndex: 'order_number',},
            {title: '团单编号', dataIndex: 'bulk_no',},
            {title: '商品名称', dataIndex: 'goods_name',},
            {title: '商家名称', dataIndex: 'merchanr_name',},
            {title: '收货人姓名', dataIndex: 'consignee',},
            {title: '收货人手机', dataIndex: 'consignee_phone',},
            {title: '寄送类型', dataIndex: 'order_send_type_name',},
            {title: '支付时间', dataIndex: 'order_pay_time',},
            {title: '订单状态', dataIndex: 'order_state_name',},
            {title: '操作', sorter: true,
                render: (text, record) => {
                    console.log(text)
                    if (text.order_state_name==='待发货'){
                        return (  //塞入内容
                            <Space size="middle">
                                <Button onClick={this.kuandiDanhao.bind(this,text)} type="primary">录入快递单号</Button>
                            </Space>
                        )
                    }else if (text.order_state_name==='已发货'){
                        return (  //塞入内容
                            <Space size="middle">
                                {/*<Button onClick={this.addData.bind(this,text)} type="primary">查看同团订单</Button>*/}
                                <Button onClick={this.kuandiDanhao.bind(this,text)} type="primary">修改快递单号</Button>
                                <Button onClick={this.xiangQing.bind(this,text)} type="primary">订单详情</Button>
                            </Space>
                        )
                    }else if (text.order_state_name==='待支付'){
                        return (  //塞入内容
                            <>---</>
                        )
                    }else{
                        return (  //塞入内容
                            <Space size="middle">
                                <Button onClick={this.xiangQing.bind(this,text)} type="primary">订单详情</Button>
                            </Space>
                        )
                    }
                }
            },
        ];

        return (
            <div>
                <Card headStyle={titleStyle} title="订单列表">
                    <Tabs size='large' tabBarGutter='50px' defaultActiveKey='1' onChange={this.props.dingdanLeixing.bind(this)}>
                        <TabPane tab="&nbsp;&nbsp;&nbsp;&nbsp;普通订单&nbsp;&nbsp;&nbsp;&nbsp;" key="1">
                            {this.xuanranTable(data,columns)}
                        </TabPane>
                        <TabPane tab="&nbsp;&nbsp;&nbsp;&nbsp;拼团订单&nbsp;&nbsp;&nbsp;&nbsp;" key="2">
                            {this.xuanranTable(data2,columns2)}
                        </TabPane>
                    </Tabs>
                </Card>

                <Modal
                    title={this.state.ModalTitle}
                    visible={this.state.isModalVisible}
                    onOk={this.kuandiDanhaoQueren.bind(this,this.state)}
                    onCancel={this.kuandiDanhaoQuxiao}
                    okText='确认'
                    cancelText='取消'
                >
                    <Row gutter={[8, 8]} align='middle'>
                        <Col span={4}/>
                        <Col span={5}>快递单号：</Col>
                        <Col span={12}><Input onChange={this.KuaiDiHao} defaultValue={this.state.ModalData.tracking_number}/></Col>
                    </Row>
                </Modal>

                <Modal
                    title=''
                    visible={this.state.XQisModalVisible}
                    onCancel={this.xiangqingModal}
                    width='80vw'
                    cancelText='取消'
                    okText='确认'
                >
                    <DingdanDetails.DingdanDetailsTop data={this.state.XQdata}/>
                    <DingdanDetails.DingdanDetailsBottom data={this.state.XQdata}/>
                </Modal>
            </div>
        )
    }
}

//团单筛选
class TuandanSaiXuan extends Component{
    constructor() {
        super();
        this.state={
            bulk_no:'',
            bulk_start_time:'',
            bulk_end_time:''
        }
    }
    tuandanNubber=(e)=>{
        console.log(e.target.value)
        this.setState({
            bulk_no:e.target.value
        })
    }
    startTime=(value, dateString)=>{
        console.log(dateString);
        this.setState({
            bulk_start_time:dateString
        })
    }
    endTime=(value, dateString)=>{
        console.log(dateString);
        this.setState({
            bulk_end_time:dateString
        })
    }
    render() {
        return (
            <Card headStyle={titleStyle} title="团单筛选">
                <Row style={textAlignCenter} gutter={[16, 16]}>
                    {/*<Col span={8} >
                        <Row align="middle" gutter={[8,8]}>
                            <Col span={6}>团单号</Col>
                            <Col span={14}><Input placeholder="团单号" onChange={this.tuandanNubber}/></Col>
                        </Row>
                    </Col>*/}
                    <Col span={8} >
                        <Row align="middle" gutter={[8,8]}>
                            <Col span={6}>发起拼团时间</Col>
                            <Col span={12}>
                                <Space direction="vertical" size={12}>
                                    <DatePicker locale={locale} showTime placeholder='开始日期' onChange={this.startTime}/>
                                </Space>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={8} >
                        <Row align="middle" gutter={[8,8]}>
                            <Col span={6}>拼团结束时间</Col>
                            <Col span={12}>
                                <Space direction="vertical" size={12}>
                                    <DatePicker locale={locale} showTime placeholder='开始日期' onChange={this.endTime}/>
                                </Space>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Button type="primary" onClick={this.props.search.bind(this,this.state)} style={buttonMargin}>查询</Button>
                    </Col>
                </Row>
            </Card>
        )
    }
}

//团单列表
class TuandanLieBiao extends Component{
    constructor(props) {
        super(props);
        this.state={
            data:''
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data,
        });
    }
    xuanranTuandanTable=(dataSource,columns)=>{
        if (this.props.data!='暂无数据'){
            return <Table rowKey={columns[0].dataIndex} bordered dataSource={dataSource} columns={columns} />
        }else {
            return <Empty
                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                description='暂无数据'
                locale={locale}/>
        }
    }
    render() {
        const dataSource =this.props.data;
        const columns = [
            {title: '团单号', dataIndex: 'bulk_no',},
            {
                title: '订单ID',
                dataIndex: 'order_number',
                render:(text,row,index)=>{
                    return (
                        <>
                            {
                                text.map((item,i)=>{
                                    return <p key={i}>{item}</p>
                                })
                            }
                        </>
                    )
                }
            }
            ,
            {title: '商品ID', dataIndex: 'goods_id',},
            {title: '商品名称', dataIndex: 'goods_name',},
            {title: '发起拼团时间', dataIndex: 'bulk_start_time',},
            {title: '拼团结束时间', dataIndex: 'bulk_end_time',},
            {title: '成团有效时间（小时）', dataIndex: 'bulk_activity_use_time',},
            {title: '成团人数', dataIndex: 'bulk_number',},
            {title: '已成团人数', dataIndex: 'bulk_tuxedo',},
            {title: '拼团状态', dataIndex: 'bulk_state_name',},
        ];
        return (
            <div>
                <Card>
                    {this.xuanranTuandanTable(dataSource,columns)}
                </Card>
            </div>
        )
    }
}


export default {
    DingdanData,
    DingdanSaiXuan,
    DingdanLieBiao,
    TuandanSaiXuan,
    TuandanLieBiao
}